<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <el-table
            :data="tableData"
            style="width: 100%"
             
            class="card-table"
            :border="false"
            stripe
            :default-sort="{ prop: 'five' }"
          >
            <el-table-column label="序号" min-width="40" align="center">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              label="售房编号"
              prop="saleNo"
              min-width="75"
              align="center"
            >
              <template slot-scope="scope">
                <router-link
                  :to="{
                    path: 'salesProcess',
                    query: { id: scope.row.processId, isDetail: true },
                  }"
                  class="linkBtn"
                >
                  {{ scope.row.saleNo }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="房产地址"
              prop="address"
              min-width="200"
              align="center"
            >
              <template slot-scope="scope">
                <router-link
                  :to="{ path: 'pageDetail', query: { id: scope.row.houseId } }"
                  class="linkBtn"
                >
                  {{ scope.row.address }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
              <template slot-scope="scope">
                <span>{{ salesStatusOptions[scope.row.status] }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="saleManager"
              label="销售经理"
              align="center"
            />
            <el-table-column
              prop="saleBeginDate"
              label="起售日期"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ formatDot(scope.row.saleBeginDate) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="saleCompleteDate"
              label="售出日期"
              align="center"
              min-width="65"
            >
              <template slot-scope="scope">
                <span>{{ formatDot(scope.row.saleCompleteDate) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="salePrice"
              label="售价"
              min-width="100"
              align="center"
            >
              <template slot-scope="scope">
                <span v-show="scope.row.salePrice"
                  >${{ scope.row.salePrice }}</span
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            :current-page="listQuery.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <!---->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getPageList } from "@/api/sale";
import { replaceParamEmptyString, formatDot } from "@/utils/common";
import { salesStatusOptions } from "@/utils/consts";

export default {
  props: {
    obj: {
      type: Object,
    },
  },
  data() {
    return {
      salesStatusOptions,
      formatDot,
      saleList: [],
      tableData: [],
      total: 0,
      radio: 3,
      listQuery: {
        page: 1,
        keyword: "",
        limit: 10,
        status: "",
        saleManager: "",
        saleBeginDate: "",
      },
    };
  },
  created() {
    this.getSaleList();
  },
  mounted() {
    this.$parent.$on("searchData", (val) => {
      console.log(val, 9999);
      this.listQuery = val;
      this.getSaleList();
    });
  },
  methods: {
    async getSaleList() {
      try {
        this.listQuery = replaceParamEmptyString(this.listQuery, [
          "keyword",
          "saleDate",
          "saleManager",
          "status",
        ]);
        console.log(this.listQuery, 88888);
        var res = await getPageList(this.listQuery);
        if (res.code === 200) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      } catch (error) {
        this.$message({
          message: "出错了",
          type: "error",
        });
      }
    },

    handleSizeChange(val) {
      this.listQuery.page = 1;
      this.listQuery.limit = val;
      this.getSaleList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getSaleList();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table th.is-leaf,
::v-deep .el-table td,
::v-deep .el-table__body {
  border: 0;
}
::v-deep .el-table::before,
::v-deep .el-table__fixed-right::before {
  display: none;
}
::v-deep th {
  background: #f7f7f7;
  font-weight: normal;
  color: #101010;
}
</style>

